<template>
  <ul>
    <li class="timeNum">{{h}}</li>
    <li class="timeUnit">时</li>
    <li class="timeNum">{{m}}</li>
    <li class="timeUnit">分</li>
    <li class="timeNum">{{s}}</li>
    <li class="timeUnit">秒</li>
  </ul>
</template>
<script>
export default {
  props: {
    type: String,
    timestamp: Number,
    onTimeDown: Function
  },
  data() {
    return {
      timeVal: this.timestamp
    };
  },
  //100
  computed: {
    h() {
      let val = String(Math.floor(this.timeVal / 3600));
      return val.length < 2 ? "0" + val : val;
    },
    m() {
      let val = String(Math.floor((this.timeVal % 3600) / 60));
      return val.length < 2 ? "0" + val : val;
    },
    s() {
      let val = String(Math.floor((this.timeVal % 3600) % 60));
      return val.length < 2 ? "0" + val : val;
    }
  },
  methods: {},
  mounted() {
    let inx = setInterval(() => {
      this.timeVal -= 1;
      if (this.timeVal < 1) {
        this.onTimeDown && this.onTimeDown();
        clearInterval(inx);
      }
    }, 1000);
  }
};
</script>

<style lang="less" scoped>
ul {
  margin-left: 1rem;
  display: flex;
  font-size: 0.65rem;
  .timeNum {
    background-color: #ff335c;
    color: white;
    padding: 0.2rem;
    border-radius: 0.2rem;
  }
  .timeUnit {
    padding: 0.2rem;
    color: #ff335c;
  }
}
</style>